<template>
    <div>

        <div class="six-action-container">
            <div style="padding: 1rem;" class="six-action-item" v-for="(v, i) in taskList" :key="i">
                <div class="bubble"
                    :style="{ backgroundImage: `url(${require('@/assets/index_bg/' + (i + 1) + '.png')})` }">
                    <div class="act-text">

                        <div class="title">
                            {{ v.label }}·待办
                        </div>
                        <div class="todo">
                            {{ v.value }}
                        </div>
                    </div>
                    <div class="bg-to" @click="toRoute(v.url)">更多☞</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

import { isEmpty } from "@/api/helpFunc";

import { countZzbldUnTodo as getUndo } from "@/api/workstudy/post";

import { checkPermi } from "@/utils/permission";

export default {
    name: "zzbld-qgzx",
    data() {
        return {

            taskList: [
            ],


            myChartStyle: { float: "left", width: "400px", height: "300px", margin: 0 },//图表样式


            init_park_list: []

        }
    },
    created() {
        if (checkPermi(['home:zzbld:qgzx'])) {
            this.getUndo();
        }
    },
    methods: {
        async getUndo() {
            this.taskList = [];
            let res = await getUndo();
            if (res.code == 200) {
                let data = { ...res.data };
                this.taskList.push({
                    label: "资助办领导·岗位审核",
                    name: "post",
                    value: data.post,
                    url: "/workstudy/post/high"
                });
                this.taskList.push({
                    label: "资助办领导·学生岗位审核",
                    name: "stuPost",
                    value: data.stuPost,
                    url: "/workstudy/stupost/zzbld"
                });
                this.taskList.push({
                    label: "资助办领导·薪资审核",
                    name: "money",
                    value: data.money,
                    url: "/workstudy/money/final"
                });
            }
        },

        toRoute(url) {
            if (!isEmpty(url)) {
                this.$router.push(url);
            }
        },
    }

}

</script>

<style scoped lang="scss">
.six-action-container {
    display: flex;
    flex-wrap: wrap;
}

.six-action-item {
    flex-basis: 33.33%;
}

.bubble {
    overflow: hidden;
    margin: 0 auto;
    width: 100%;
    height: 170px;
    border-radius: 1rem;
    // background-image: linear-gradient(120deg, rgb(134, 233, 98) 0%, rgb(45, 175, 92) 100%);
    position: relative;
    background-size: cover;
    min-width: 250px;
}

.act-text {
    width: 100%;
    z-index: 2;
    margin: 1rem;


    .title {
        text-align: left;
        font-size: 1.25rem;
        color: #fff;
    }

    .todo {
        font-size: 6rem;
        color: #fff;
    }
}

.bg-to {
    cursor: pointer;
    z-index: 3;
    position: absolute;
    bottom: 5%;
    right: 3%;
    margin-top: 10px;
    color: white;
}

.six-action-item:hover,
.fast-act:hover {
    cursor: pointer;

    transform: scale(1.1);
}
</style>